<template>

  <div class="city">
     <city-header></city-header>
     <city-search :cities='cities'></city-search>
     <city-main :hotCities='hotCities' :cities='cities' :alphabet='alphabet'></city-main>
     <city-alphabet :cities='cities' @acceptKey='acceptKey'></city-alphabet>
  </div>

</template>

<script>
import CityHeader from './components/city-header';
import CitySearch from './components/city-search';
import CityMain from './components/city-main'
import CityAlphabet from './components/city-alphabet'
  export default {
    name:'City',
    data() {
      return {
        hotCities:[],
        cities:{},
        alphabet:''
      }
    },
    components:{
        CityHeader,
        CitySearch,
        CityMain,
        CityAlphabet
    },
    created() {
      this.$Axios({
        method:"get",
        url:"/city"
      }).then(backdata=>{
        // console.log(backdata)
        let {hotCities,cities} = backdata.data.data
        this.hotCities = hotCities
        this.cities = cities
        // console.log(hotCities)
      })
    },
    methods: {
      acceptKey(key){
        this.alphabet = key
      }
    },

  }
</script>
<style lang='stylus' scoped>
.v-enter, .v-leave-to
    opacity 0
 
.v-enter-active, .v-leave-active
    transition opacity 0.8s
</style>